<template>
  <div class="contentContainer">
    <Title title="各模型调用次数"/>
    <div class="contentBox" id="dycsCharts"></div>
  </div>
</template>
<script>
import Title from './Title'
import echarts from "echarts";

export default {
  name: '',
  props: {},
  components: {
    Title
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.initChartMap()
  },
  methods: {
    initChartMap() {
      let dom = document.getElementById('dycsCharts');
      var chart = echarts.init(dom, 'chalk')
      var option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '2%',
          right: '10%',
          bottom: '2%',
          top: '5%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'category',
          data: ['某远程机动安全⻛险评估模型', '某器材接运安全⻛险评估模型', '某爆破作业安全⻛险评估模型'],
          axisLabel: {
            formatter: function (params) {
              let newName = '';
              if (params.length > 4) {
                newName = params.substring(0, 4) + '...';
              } else {
                newName = params;
              }
              return newName;
            }
          }
        },
        series: [
          {
            type: 'bar',
            data: [18203, 23489, 29034],
            label: {
              normal: {
                show: true,
                position: 'right',
                textStyle: {
                  color: '#333',
                  fontSize: '12px'
                },
              }
            },
            itemStyle: {
              normal: {
                //这里是颜色
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#5470c6', '#dca526', '#e66', '#00A3E0', '#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA', '#749f83', '#ca8622'];
                  return colorList[params.dataIndex]
                }
              }
            }
          },
        ]
      }
      chart.setOption(option)
      // 监听屏幕变化自动缩放图表
      let observer = new ResizeObserver(function () {
        chart.resize();
      });
      observer.observe(dom)
    }
  },
}
</script>
<style lang="scss" scoped>
.contentContainer {
  height: 100%;
  padding: 10px 16px;
  box-sizing: border-box;

  .contentBox {
    height: calc(100% - 40px);
  }
}
</style>
